<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorate="layout/layout">
<section layout:fragment="content-header" class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>文件列表
                </h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a  href="/admin/file/create">添加文件</a></li>
                </ol>
            </div>
        </div>
    </div>
</section>
<div layout:fragment="main-content">

    <section class="content">
        <div class="container-fluid">
            <div>
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">文件列表</h3>
                    </div>
                    <div class="card-body">
                        <div class="filtering_list clear_fix">

                            <div class="form-inline" style="float: right;">
                                <div class="input-group" >
                                    <input class="form-control form-control-sidebar" placeholder="请输入名称" aria-label="请输入名称" id="searchName" maxlength="30" autocomplete="off" th:value="${name != null} ? ${name}">
                                    <div class="input-group-append search_btn">
                                        <button class="btn " onclick="search()">
                                            <i class="fas fa-search fa-fw"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th style="width: 200px;">名称</th>
                                <th>文件大小</th>
                                <th>添加时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="fileInfo : ${files}"
                                th:style="'background-color:'+@{${fileInfoStat.count % 2}?'#F2F2F2'}">
                                <td th:text="${(page - 1) * pageSize + fileInfoStat.count}"></td>

                                <td  class="text_tip_hover" >
                                    <div th:if="${fileInfo['name']} != null" class="text_tip" th:text="${fileInfo['name']}"></div>
                                    <div class="common_text_limit_2_s"  th:text="${fileInfo['name']}"></div>
                                </td>

                                <td th:text="${fileInfo['size']}"></td>
                                <td th:text="${#dates.format(fileInfo['addTime'], 'yyyy/MM/dd HH:mm:ss')}"></td>
                                <td>
                                    <button class="rtmpBtn" th:attr="data-id=${fileInfo.id}">Rtmp</button>
                                    <button class="hlsBtn" th:attr="data-id=${fileInfo.id}">HLS</button>
                                    <button class="flvBtn" th:attr="data-id=${fileInfo.id}">FLV</button>
                                    <button class="webrtcBtn" th:attr="data-id=${fileInfo.id}">Webrtc</button>
                                </td>

                            </tr>
                            </tbody>
                        </table>
                        <!--            无数据样式            -->
                        <div class="nodataBox" th:if="${files.size() == 0}">
                            <div class="nodataImgBox">
                                <img class="nodataImg" src="/static/dist/img/bd-nodata.svg" alt="">
                            </div>
                            <p class="nodataText">暂无数据</p>
                        </div>
                        <!--            无数据样式            -->
                    </div>
                    <div class="card-footer clearfix">
                        <ul class="pagination pagination-sm m-0 float-right">
                            <li class="page-item"><a class="page-link" href="#" th:href="'/admin/file/list?page=1&name=' + ${name}">首页</a></li>

                            <!-- 上一页 -->
                            <li class="page-item" th:if="${page > 1}">
                                <a class="page-link" th:href="'/admin/file/list?page=' + ${prevPage}+ '&name=' + ${name}" th:text="上一页"></a>
                            </li>

                            <!-- 中间页 -->
                            <li class="page-item" th:each="pageNum:${#numbers.sequence(1, maxPage)}">
                                <!-- 判断是否是当前页 -->
                                <a class="page-link" th:href="'/admin/file/list?page=' + ${pageNum}+ '&name=' + ${name}" th:text="${pageNum}" th:if="${(pageNum ne page) && (pageNum > page - 3) && (pageNum < page + 3 )}"></a>
                                <a class="page-link" th:href="'/admin/file/list?page=' + ${pageNum}+ '&name=' + ${name}" th:text="${pageNum}" th:if="${pageNum eq page}" th:style="'font-weight:bold;background: #6faed9;'"></a>
                            </li>

                            <!-- 下一页 -->
                            <li class="page-item" th:if="${page < maxPage}">
                                <a class="page-link" th:href="'/admin/file/list?page=' + ${nextPage}+ '&name=' + ${name}" th:text="下一页"></a>
                            </li>
                            <li class="page-item"><a class="page-link" href="#" th:href="'/admin/file/list?page=' + ${maxPage}+ '&name=' + ${name}">尾页</a></li>


                        </ul>
                    </div>
                </div>
            </div>

        </div>

    </section>

    <script>
        var lock = false;
        var delId = '';

        function confirmDel(){
            if(lock){
                return false;
            }
            lock = true;
            $.ajax({
                type: "post",
                url: '/admin/file/dodelete',
                data: {
                    id : delId
                },
                dataType: "json",
                success: function(res) {
                    if (res.code == 200) {
                        layer.msg('删除成功',{time:1500},function (){
                            window.location.href="/admin/label/list";
                            lock = false;
                        })

                    } else {
                        layer.msg('删除失败',{time:1500},function (){
                            lock = false;
                        })
                    }
                },
                error: function(data) {
                    layer.msg('请刷新后重试!',{time:1500},function (){
                        lock = false;
                    })
                }
            })
        }

        function search(){
            var name = $('#searchName').val();
            window.location.href = "/admin/label/list?page=1&name=" + name;
        }

        function startPush(id, type) {
            if(lock){
                return false;
            }
            lock = true;
            $.ajax({
                type: "post",
                url: '/admin/file/push',
                data: {
                    fileId : id,
                    type : type,
                },
                dataType: "json",
                success: function(res) {
                    if (res.code == 200) {
                        layer.msg('操作成功',{time:1500},function (){
                            lock = false;
                        })

                    } else {
                        layer.msg('操作失败',{time:1500},function (){
                            lock = false;
                        })
                    }
                },
                error: function(data) {
                    layer.msg('请刷新后重试!',{time:1500},function (){
                        lock = false;
                    })
                }
            })
        }

        $(function () {

            $('.rtmpBtn').click(function() {
                var id = $(this).data('id');
                startPush(id, 'rtmp')
            });
            $('.hlsBtn').click(function() {
                var id = $(this).data('id');
                startPush(id, 'hls')
            });
            $('.flvBtn').click(function() {
                var id = $(this).data('id');
                startPush(id, 'flv')
            });
            $('.webrtcBtn').click(function() {
                var id = $(this).data('id');
                startPush(id, 'webrtc')
            });
        })
    </script>

</div>
